<script setup>
import { ACESFilmicToneMapping, PCFSoftShadowMap } from 'three'
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  eastStoreData: {
    type: Array,
    default: () => [],
  },
  westStoreData: {
    type: Array,
    default: () => [],
  },
  ready: {
    type: Boolean,
    default: false,
  },
})

// const state = reactive({
//   mockEastStoreData: [],
//   mockReady: false,
// })

const sceneContainerRef = ref(null)
const sceneRef = ref(null)

watchEffect(() => {
  if(sceneRef.value) {
    const renderer = sceneRef.value.context.renderer.value
    const scene = sceneRef.value.context.scene.value
    const camera = sceneRef.value.context.camera.value
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.physicallyCorrectLights = true
    renderer.shadowMap.type = PCFSoftShadowMap
    renderer.toneMapping = ACESFilmicToneMapping
    renderer.toneMappingExposure = 1
    // renderer.outputEncoding = sRGBEncoding
    console.log('%c%s', 'font-size:2em;background: #00965E;color: #FFF', '主场景三要素', scene, camera, renderer)
    console.log('%c%s', 'font-size:2em;background: #00965E;color: #FFF', '主场景上下文', sceneRef.value.context)
    // setTimeout(() => {
    //   state.mockEastStoreData = [
    //     { coordinate: '001-001', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '001-002', locationStatus: '1', inventoryType: '3' },
    //     { coordinate: '001-003', locationStatus: '1', inventoryType: '4' },
    //     { coordinate: '001-004', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '001-005', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '001-006', locationStatus: '1', inventoryType: '3' },
    //     { coordinate: '001-007', locationStatus: '1', inventoryType: '4' },
    //     { coordinate: '001-008', locationStatus: '1', inventoryType: '4' },
    //     { coordinate: '002-001', locationStatus: '1', inventoryType: '4' },
    //     { coordinate: '002-002', locationStatus: '1', inventoryType: '4' },
    //     { coordinate: '002-003', locationStatus: '1', inventoryType: '4' },
    //     { coordinate: '002-004', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '002-005', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '002-006', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '002-007', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '002-008', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-001', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-002', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-003', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-004', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-005', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-006', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-007', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '003-008', locationStatus: '1', inventoryType: '1' },
    //     { coordinate: '004-001', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-002', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-003', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-004', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-005', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-006', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-007', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '004-008', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-001', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-002', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-003', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-004', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-005', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-006', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-007', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '005-008', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-001', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-002', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-003', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-004', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-005', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-006', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-007', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '006-008', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-001', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-002', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-003', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-004', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-005', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-006', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-007', locationStatus: '1', inventoryType: '2' },
    //     { coordinate: '007-008', locationStatus: '1', inventoryType: '2' },
    //   ]
    //   state.mockReady = true
    // }, 1000)
  }
})

// const { mockEastStoreData, mockReady } = toRefs(state)
</script>

<template>
  <section class="three-viewer">
    <div ref="sceneContainerRef" class="scene-container">
      <TresCanvas ref="sceneRef" preset="realistic" precision="high" :alpha="true">
        <OrbitControls />
        <TresPerspectiveCamera
          :position="[6, 5, 6]"
          :look-at="[0, 0, 0]"
          :fov="30"
        />
        <Suspense>
          <SceneMain :east-store-data="eastStoreData" :west-store-data="westStoreData" :ready="ready" />
          <!-- <SceneMain :east-store-data="mockEastStoreData" :west-store-data="[]" :ready="mockReady" /> -->
        </Suspense>

        <!-- 顶部环境光 -->
        <TresAmbientLight :color="0x000000" :intensity="1" :position="[0, 6, 0]" />

        <!-- 货架打光 -->
        <TresDirectionalLight :color="0x5BBEFF" :position="[0, 6, 5]" :intensity="1" cast-shadow />

        <!-- @fixme 仅调试:网格辅助 -->
        <!-- <TresGridHelper /> -->
        <!-- @fixme 仅调试:坐标轴辅助 -->
        <!-- <TresAxesHelper :args="[5]" /> -->
      </TresCanvas>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.three-viewer {
  width: 100%;
  height: 100%;
  padding: 16px 0;

  .scene-container {
    width: 100%;
    height: 100%;
  }
}
</style>
